<template>
	<div class="myLive_list">
		<div class="teach_h classIndex_h">
			<router-link to="/teach/live/listlive">我的直播</router-link>
			<strong v-if="live_name"><i>></i>{{live_name}}</strong>
			<strong v-else><i>></i>统计详情</strong>
		</div>
		<!--  -->
		<div class="classNotice_search">
			<el-input class="classNotice_sc" placeholder="按用户名搜索"  @keyup.enter.native="searchLiveList" v-model="searchVal">
				<el-button slot="append" @click="searchLiveList" icon="el-icon-search"></el-button>
			</el-input>

			<el-button @click="downloadMater" type="primary">导出列表</el-button>
		</div>
		<!--  -->
		<div class="publishFrom_table" v-if="liveListData.length !== 0">
			<template>
				<el-table
				border
				id="rebateSetTable"
				ref="singleTable"
				:data="liveListData"
				highlight-current-row
				style="width: 100%">
					<el-table-column
						type="index"
						label="序号"
						align='center'
						show-overflow-tooltip
						width="50">
					</el-table-column>
					<el-table-column
						property="u_number"
						label="用户账户"
						align='center'
						show-overflow-tooltip
						width="">
					</el-table-column>
					<el-table-column
						property="u_name"
						align='center'
						show-overflow-tooltip
						label="用户名"
						width="">
					</el-table-column>
					<el-table-column
						width="210"
						align='center'
						show-overflow-tooltip
						property="time_frame"
						label="时段">
					</el-table-column>
					<el-table-column
						width="160"
						align='center'
						show-overflow-tooltip
						property="join_time"
						label="参加直播时间">
					</el-table-column>
				</el-table>
			</template>
		</div>
		<!--  -->
		<div class="dependent" v-if="liveListData.length == 0">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>
		<!--  -->
		<div class="pageBox" v-if="total_number > page_size">
			  <el-pagination
			      @size-change="sizechange"
			      @current-change="change_page"
			      :current-page="page_index"
			      :page-sizes="[20, 40, 80, 100, 150, 200]"
			      :page-size="page_size"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total_number">
			  </el-pagination>
		</div>

	</div>
</template>
<script>
	import FileSaver from 'file-saver'
	import XLSX from 'xlsx'

	export default {
		name: '',
		data() {
			return {
				searchVal: '',
				page_size: this.$g.page_size,
				page_index: 1,
				total_number: 0,
				liveListData: [],
				live_name: '',
				exportList: []
			}
		},
		created(){
			this.getLiveListData()
		},
		methods: {
			//列表
			getLiveListData(){
				let success = (res => {
					let data = res.data;
					this.liveListData = data.data;
					this.total_number = data.data_sum;
					if (data.data.length === 0) {return}
					this.page_index = parseInt(data.page_index);
					this.live_name = data.data[0].l_name
				});
				this.$ajax({
					url: "api/live/live_user_list",
					method: 'get',
					params: {
						live_id: this.$route.query.id,
						page_index: this.page_index,
						page_size: this.page_size,
						keyword: this.searchVal
					},
					func: {
						success: success
					}
				});
			},
			//搜索
			searchLiveList(){
				this.page_index = 1;
				this.getLiveListData()
			},
			//分页
			change_page(val){
				this.page_index = val;
				this.getLiveListData()
			},
			sizechange(val){
				this.page_size = val;
				this.getLiveListData()
			},
			//下载列表
			downloadMater (){
			
				const defaultCellStyle =  { 
					border: {
						top:  {style: "thin"}, bottom: {style: "thin"}, 
						left: {style: "thin"}, right:{style: "thin"}
					},
					alignment: {horizontal: "center", vertical: "center"},
					font: { name: "Microsoft Yahei", sz: 14, color: "FF00FF88"},
					fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } }
				};
				const wopts = { bookType:'xlsx', bookSST:false, type:'binary', defaultCellStyle: defaultCellStyle, showGridLines: false};
				const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };

				if (this.liveListData.length === 0) {
					this.$message.error('还没发现任何相关的内容哦~,无法下载相关内容');
					return
				}

				for (let i = 0; i <= this.liveListData.length - 1;  i+=1) {
					this.exportList.push({
						"用户账户": this.liveListData[i].u_name,
						"账号": this.liveListData[i].u_number,
						"时段": this.liveListData[i].time_frame,
						"参加直播时间": this.liveListData[i].join_time
					});
				}
				
				wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(this.exportList)

                //创建二进制对象写入转换好的字节流
                let tmpDown =  new Blob([this.s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" });
                FileSaver.saveAs(tmpDown, `${this.live_name}直播用户记录.xlsx`);
            },
             //字符串转字符流
            s2ab (s) {
             	if (typeof ArrayBuffer !== 'undefined') {
             		var buf = new ArrayBuffer(s.length);
             		var view = new Uint8Array(buf);
             		for (let i = 0; i != s.length; i+=1){
             			view[i] = s.charCodeAt(i) & 0xFF;
             		}
             		return buf;
             	} else {
             		var buf = new Array(s.length);
             		for (let i = 0; i != s.length; i+=1){
             			 buf[i] = s.charCodeAt(i) & 0xFF;
             		}
             		return buf;
             	}
            }

		}
	}
</script>